<template>
  <div class="sort">
    <ul>
      <router-link :to="'/category/' + type + '/all'" tag="li" >
        <div class="sortkey" @click="senddata('all')">综合</div>
      </router-link>
      <router-link :to="'/category/' + type + '/sales'" tag="li">
        <div class="sortkey" @click="senddata('sales')">销量</div>
      </router-link>
      <router-link :to="'/category/' + type + '/prices'" tag="li">
        <div class="sortkey" @click="changesort">价格</div>
        <div class="sortprice" @click="changesort">
          <span class="iconfont icon-up" :style="isascend? 'color:#000':''"></span>
          <span class="iconfont icon-_xia" :style="isascend? '':'color:#000'"></span>
        </div>
      </router-link>
      <router-link :to="'/category/' + type + '/new'" tag="li">
        <div class="sortkey" @click="senddata('new')">新品</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'flower'
    }
  },
  data () {
    return {
      isascend: false
    }
  },
  methods: {
    changesort () {
      this.isascend = !this.isascend
      this.$emit('my-event2', this.isascend)
    },
    senddata (val) {
      this.$emit('my-event', val)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.sort {
  background-color: #fff;
      ul {
        display: flex;
        li {
          font-size: 14px;
          height: 40px;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          &.router-link-exact-active,
          .router-link-active {
            @include color(#ff734c);
          }
          .sortkey {
          }
          .sortprice {
            display: flex;
            flex-direction: column;
            span{
              font-size: .2rem;
              &.notactive{
                color: #000;
              }
            }
          }
        }
      }
    }
</style>
